<template>
  <div class="realTimeCabinetContentPage" v-loading="state.loading">
    <div
      v-if="props.modelValue.length > 0"
      class="card_item"
      v-for="(item, index) in props.modelValue"
      :key="item.cabinetId"
    >
      <el-card style="max-width: 480px">
        <template #header>
          <div class="card-header">
            <div>{{ item.cabinetName }}</div>
            <div>
              <el-tag :type="item.type === 0 ? 'success' : ''">
                {{ cabinet.tags["cabinetType"][item.type] }}
              </el-tag>
            </div>
          </div>
        </template>
        <div
          v-for="(deviceItem, deviceIndex) in state.defaultField"
          :key="deviceIndex"
          class="text-item"
        >
          <div>
            {{
              getrightObj(
                deviceItem.name.toLowerCase(),
                "objectName",
                item.type
              ) +
              " : " +
              getDictData(deviceItem.key, item[deviceItem.key])
            }}
          </div>
          <div class="text-value">
            <el-switch
              v-model="item[deviceItem.key]"
              @change="
                controlThree(
                  deviceItem.name.toLowerCase(),
                  item,
                  deviceItem.key
                )
              "
              class="ml-2"
              :active-value="1"
              :inactive-value="0"
              :disabled="
                deviceItem.key !== 'mode' &&
                realTime.typeMode[item.mode].dictLabel === '自动'
              "
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
            />
          </div>
        </div>
        <!-- <template #footer>
          <div class="card-footer">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="详情"
              placement="bottom"
            >
              <el-button class="btn" :icon="Search" @click="toggleInfo(item)"
                >查看</el-button
              >
            </el-tooltip>
          </div>
        </template> -->
      </el-card>
    </div>
    <div v-else>所选站点暂无数据，请重新选择站点</div>
  </div>
</template>
<script lang="ts" setup>
import _ from "lodash";
import { onMounted, reactive, inject } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const cabinet = inject("cabinet") as any;
const site = inject("site") as any;
const instruct = inject("instruct") as any;
const realTime = inject("realTime") as any;
const itemObject = inject("itemObject") as any;

const state: {
  defaultField: anyObj[];
  loading: boolean;
} = reactive({
  defaultField: [
    {
      icon: "",
      name: "MODEC",
      unit: "",
      value: "",
      key: "mode",
    },
    {
      icon: "",
      name: "AUTOC", //写
      unit: "",
      value: "",
      key: "mode1", //读
    },
    {
      icon: "",
      name: "FP1C",
      unit: "",
      value: "",
      key: "fp1",
    },
    {
      icon: "",
      name: "FP2C",
      unit: "",
      value: "",
      key: "fp2",
    },
    {
      icon: "",
      name: "PF1C",
      unit: "",
      value: "",
      key: "pf1",
    },
    {
      icon: "",
      name: "PF2C",
      unit: "",
      value: "",
      key: "pf2",
    },
    {
      icon: "",
      name: "QF1C",
      unit: "",
      value: "",
      key: "qf1",
    },
    {
      icon: "",
      name: "WF1C",
      unit: "",
      value: "",
      key: "wf1",
    },
  ],
  loading: false,
});

interface Props {
  modelValue: any;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: [],
});
// 传递给父组件的值
const emit = defineEmits(["on-refreshData"]);

//获取当前字段数据值
const getrightObj = (filed: String, property: any, type: any) => {
  let value = _.filter(itemObject.fullData, { mqttFiled: filed });
  if (type) {
    return value[0][property];
  } else {
    return value[0]["objectNameVertical"];
  }
};
//获取当前字段字典值
const getDictData = (filed: String, key: any) => {
  let value: any = _.filter(itemObject.fullData, { mqttFiled: filed });
  switch (value[0].categoryName) {
    case "工作模式":
      //MODEC 工作模式控制
      return realTime.typeMode[key].dictLabel;
    case "自动模式状态":
      //AUTOC 自动工作控制
      return realTime.typemode1[key].dictLabel;
    case "泵":
      //FP1C氟泵1控制 FP2C氟泵2控制
      return realTime.typefp1[key].dictLabel;
    case "泵阀":
      //PF1C氟泵1阀控制 PF2C氟泵2阀控制
      return realTime.typepf1[key].dictLabel;
    case "泄压阀":
      //QF1C电子泄压阀1控制
      return realTime.typeqf[key].dictLabel;
    case "风机":
      //WF1C风扇控制
      return realTime.typewf1[key].dictLabel;
  }
};

//获取全部地区站点数据
const getAllCheckKeys = (filter: any) => {
  let len = filter.length;
  let keys: any = [];
  for (let i = 0; i < len; i++) {
    keys.push(filter[i].siteId);
  }
  return keys;
};

//数据切换按钮
const controlThree = (Filed: string, item: any, key: any) => {
  state.loading = true;
  let paramsData: any = {};
  paramsData.gatewayCode = item.code; //网关编号
  paramsData.cabinetName = item.cabinetName; //机柜名称
  paramsData.cabinetId = item.cabinetId; //机柜Id
  if (Filed === "modec") {
    paramsData[Filed] = item[key] ? 1 : 2; //1切换到自动 2切换到手动
  } else if (Filed === "autoc") {
    paramsData[Filed] = item[key] ? 1 : 0; //1启动 2清零
  } else {
    paramsData[Filed] = 1; //其余开和关都写1
  }
  paramsData.remark = JSON.stringify(paramsData); //指令参数信息
  //发送远程指令
  instruct
    .change(paramsData)
    .then((res: any) => {
      //刷新
      setTimeout(() => {
        state.loading = false;
        emit(
          "on-refreshData",
          {},
          {
            checkedKeys: getAllCheckKeys(site.AllCheckedNodes),
          }
        );
      }, 3000);
    })
    .catch((err: any) => {
      state.loading = false;
      emit(
        "on-refreshData",
        {},
        {
          checkedKeys: getAllCheckKeys(site.AllCheckedNodes),
        }
      );
    });
};

//跳转机柜大屏详情
const toggleInfo = (item: any) => {
  router.push({
    path: "/admin/5Gsmall/detail",
    query: { cabinetId: item.cabinetId },
  });
};

onMounted(() => {});
</script>
<style lang="scss" scoped>
.realTimeCabinetContentPage {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  .card_item {
    width: 30%;
    margin-left: 10px;
    .card-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .text-item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-top: 10px;
      .text-value {
        width: 20%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
    }
    .card-footer {
      position: relative;
      text-align: right;
    }
  }
}

:deep .el-switch.is-checked .el-switch__core .el-switch__action {
  left: calc(100%);
}
</style>
